<template>
  <div class="page building-page" v-if="unitDetail">
    <nav-bar :title="unitDetail.buildName"></nav-bar>
    <div class="page-main" style="margin-top: 44px">
      <van-sticky :offset-top="44">
        <van-tabs v-model="type" class="van-hairline--bottom" @change="tabChange">
          <van-tab v-for="(item, key) in tabOptions" :key="key" :title="item.unitName" :name="item.unit"></van-tab>
        </van-tabs>
      </van-sticky>
      <ul class="building-infos-list" v-if="unitDetail.administrator && unitDetail.houseState">
        <!-- <li class="building-infos-item" v-for="item in infos" :key="item.id">
          <span>{{ item.label }}</span>
          <span>{{ item.text }}</span>
        </li> -->
        <li class="building-infos-item">
          <span>楼栋长</span>
          <span>{{ unitDetail.administrator.name }}</span>
        </li>
        <li class="building-infos-item">
          <span>电话</span>
          <span>{{ unitDetail.administrator.phone }}</span>
        </li>
        <li class="building-infos-item">
          <span>房屋数</span>
          <span>{{ unitDetail.houseState.houseNmu }}</span>
        </li>
        <li class="building-infos-item">
          <span>单位数</span>
          <span>{{ unitDetail.houseState.companyNum }}</span>
        </li>
      </ul>
      <div class="building-statistics">
        <van-cell
          title="楼栋统计"
          value="查看全部"
          size="large"
          is-link
          :border="false"
          :to="`/gridmap/buildingRoom?buildCode=${curBuildCode}&unit=${curUnitCode}`"
        />
        <div class="building-statistics-main" v-if="unitDetail.buildPerson">
          <p class="building-statistics-subtitle">人口统计</p>
          <gb-card shadow>
            <van-row class="building-statistics-list">
              <van-col :span="8" align="center" class="building-statistics-item">
                <p class="building-statistics-item-num" style="color: #37c2bb">
                  {{ unitDetail.buildPerson.buildPersonNum }}
                </p>
                <p>楼栋人数</p>
                <em class="building-statistics-item-line"></em>
              </van-col>
              <van-col :span="8" align="center" class="building-statistics-item">
                <p class="building-statistics-item-num" style="color: #37c2bb">
                  {{ unitDetail.buildPerson.residentNum }}
                </p>
                <p>常住人口</p>
                <em class="building-statistics-item-line"></em>
              </van-col>
              <van-col :span="8" align="center" class="building-statistics-item">
                <p class="building-statistics-item-num" style="color: #37c2bb">
                  {{ unitDetail.buildPerson.floatingNum }}
                </p>
                <p>流动人口</p>
              </van-col>
              <van-col :span="8" align="center" class="building-statistics-item">
                <p class="building-statistics-item-num" style="color: #e28556">
                  {{ unitDetail.buildPerson.keyPersonNum }}
                </p>
                <p>特殊人群</p>
                <em class="building-statistics-item-line"></em>
              </van-col>
              <van-col :span="8" align="center" class="building-statistics-item">
                <p class="building-statistics-item-num" style="color: #e28556">
                  {{ unitDetail.buildPerson.careNmu }}
                </p>
                <p>关爱人员</p>
                <em class="building-statistics-item-line"></em>
              </van-col>
              <van-col :span="8" align="center" class="building-statistics-item">
                <p class="building-statistics-item-num" style="color: #e28556">
                  {{ unitDetail.buildPerson.keyTeenagerNmu }}
                </p>
                <p>重点青少年</p>
              </van-col>
              <!-- <van-col
                :span="8"
                align="center"
                class="building-statistics-item"
                :class="{
                  mb0:
                    populationData.length > 3
                      ? index >= populationData.length - (populationData.length / 3 - 1) * 3
                      : index < populationData.length
                }"
                v-for="(item, index) in populationData"
                :key="item.id"
              >
                <p class="building-statistics-item-num" :style="{ color: item.color }">{{ item.text }}</p>
                <p>{{ item.label }}</p>
                <em class="building-statistics-item-line"></em>
              </van-col> -->
            </van-row>
          </gb-card>
          <p class="building-statistics-subtitle mt32">房屋统计</p>
          <gb-card shadow>
            <van-row class="building-statistics-list" v-if="unitDetail.houseState">
              <!-- <van-col
                :span="8"
                align="center"
                class="building-statistics-item mb0"
                v-for="item in houseData"
                :key="item.id"
              >
                <p class="building-statistics-item-num" :style="{ color: item.color }">{{ item.text }}</p>
                <p>{{ item.label }}</p>
                <em class="building-statistics-item-line"></em>
              </van-col> -->
              <van-col :span="8" align="center" class="building-statistics-item mb0">
                <p class="building-statistics-item-num" style="color: #37c2bb">
                  {{ unitDetail.houseState.selfHouseNum }}
                </p>
                <p>自用房屋</p>
                <em class="building-statistics-item-line"></em>
              </van-col>
              <van-col :span="8" align="center" class="building-statistics-item mb0">
                <p class="building-statistics-item-num" style="color: #3cbdd0">
                  {{ unitDetail.houseState.leaseHouseNmu }}
                </p>
                <p>出租房屋</p>
                <em class="building-statistics-item-line"></em>
              </van-col>
              <van-col :span="8" align="center" class="building-statistics-item mb0">
                <p class="building-statistics-item-num" style="color: #e2ab56">
                  {{ unitDetail.houseState.asideHouseNum }}
                </p>
                <p>闲置房屋</p>
              </van-col>
            </van-row>
          </gb-card>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import gridMap from '@/api/gridMap'
export default {
  data() {
    return {
      type: '1',
      tabOptions: [],
      // infos: [
      //   {
      //     id: 1,
      //     label: '楼栋长',
      //     text: ''
      //   },
      //   {
      //     id: 2,
      //     label: '电话',
      //     text: ''
      //   },
      //   {
      //     id: 3,
      //     label: '房屋数',
      //     text: ''
      //   },
      //   {
      //     id: 4,
      //     label: '单位数',
      //     text: ''
      //   }
      // ],
      // populationData: [
      //   {
      //     id: 1,
      //     label: '楼栋人数',
      //     text: '',
      //     color: '#37C2BB'
      //   },
      //   {
      //     id: 2,
      //     label: '常住人口',
      //     text: '',
      //     color: '#37C2BB'
      //   },
      //   {
      //     id: 3,
      //     label: '流动人口',
      //     text: '',
      //     color: '#37C2BB'
      //   },
      //   {
      //     id: 4,
      //     label: '特殊人群',
      //     text: '',
      //     color: '#E28556'
      //   },
      //   {
      //     id: 5,
      //     label: '关爱人员',
      //     text: '',
      //     color: '#E28556'
      //   },
      //   {
      //     id: 6,
      //     label: '重点青少年',
      //     text: '',
      //     color: '#E28556'
      //   }
      // ],
      // houseData: [
      //   {
      //     id: 1,
      //     label: '自用房屋',
      //     text: '',
      //     color: '#37C2BB'
      //   },
      //   {
      //     id: 2,
      //     label: '出租房屋',
      //     text: '',
      //     color: '#3CBDD0'
      //   },
      //   {
      //     id: 3,
      //     label: '闲置房屋',
      //     text: '',
      //     color: '#E2AB56'
      //   }
      // ],
      curBuildCode: null,
      curBuildName: '',
      curUnitCode: null,
      unitDetail: {}
    }
  },
  created() {
    this.curBuildCode = this.$route.query.buildCode
    this.getUnit()
  },
  methods: {
    getUnit() {
      gridMap.Map.unit({ buildCode: this.curBuildCode }).then(res => {
        const { status, data } = res.data
        if (status === 0) {
          this.tabOptions = data
          this.curUnitCode = data[0].unit
          this.getUnitDetail()
        }
      })
    },
    tabChange(unitCode) {
      this.curUnitCode = unitCode
      this.getUnitDetail()
    },
    getUnitDetail() {
      const paramsData = {
        buildCode: this.curBuildCode,
        unit: this.curUnitCode
      }
      gridMap.Map.unitStatistic(paramsData).then(res => {
        const { status, data } = res.data
        if (status === 0) {
          this.unitDetail = data
          // this.infos[0].text = data.administrator.name
          // this.infos[1].text = data.administrator.phone
          // this.infos[2].text = data.houseState.houseNmu
          // this.infos[3].text = data.houseState.companyNum
          // this.populationData[0].text = data.buildPerson.buildPersonNum
          // this.populationData[1].text = data.buildPerson.residentNum
          // this.populationData[2].text = data.buildPerson.floatingNum
          // this.populationData[3].text = data.buildPerson.keyPersonNum
          // this.populationData[4].text = data.buildPerson.careNmu
          // this.populationData[5].text = data.buildPerson.keyTeenagerNmu
          // this.houseData[0].text = data.houseState.selfHouseNum
          // this.houseData[1].text = data.houseState.leaseHouseNmu
          // this.houseData[2].text = data.houseState.asideHouseNum
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
@import '~@/assets/style/gridmap/BuildingDetail/index.less';
</style>
